<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>基础知识</title>
	<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"" rel="stylesheet">
	<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/3.2.3/animate.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="./css/carousel.css"/>
	<link rel="stylesheet" type="text/css" href="../../static/css/public.css" />
</head>
<body>
	<!--右边内容-->
	<div id="app" class="main animated fadeInRight">
		<div class="shadow">
			<div>
				<h4>transform-style</h4>
				<p>
					transform-style属性也是3D效果中经常使用的，其两个参数，flat|preserve-3d。
					前者flat为默认值，表示平面的；后者preserve-3d表示3D透视。 
					基本上，我们想要根据现实经验实现一些3D效果的时候，transform-style: preserve-3d是少不了的。
					一般而言，该声明应用在3D变换的兄弟元素们的父元素上，也就是舞台元素。
				</p>
				<pre>
	
	.img_wrap{
	     position: relative;
	     width: 500px;
	     height: 100px;
	     margin: 300px auto;
	     /*声明该容器下的所有子元素同属于一个3D空间*/
	     transform-style: preserve-3d;
	     animation: rotateCube 10s linear 3;
	 }
	 .img_wrap img{
	     position: absolute;
	     width: 120px;
	     height: 120px;
	     left: 0;
	     top: 0;
	     bottom: 0;
	     right:0;
	     margin: auto;
	 }
	 .img_wrap img::after{
	     content: '';
	     display: block;
	     width: 5px;
	     background: red;
	 }
	 .img_wrap img:nth-child(1){
	     transform: rotateY(0deg) translateZ(250.92px);
	 }
	 .img_wrap img:nth-child(2){
	     transform: rotateY(30deg) translateZ(250.92px);
	 }
	 .img_wrap img:nth-child(3){
	     transform: rotateY(60deg) translateZ(250.92px);
	 }
	 .img_wrap img:nth-child(4){
	     transform: rotateY(90deg) translateZ(250.92px);
	 }
	 .img_wrap img:nth-child(5){
	     transform: rotateY(120deg) translateZ(250.92px);
	 }
	 .img_wrap img:nth-child(6){
	     transform: rotateY(150deg) translateZ(250.92px);
	 }
	 .img_wrap img:nth-child(7){
	     transform: rotateY(180deg) translateZ(250.92px);
	 }
	 .img_wrap img:nth-child(8){
	     transform: rotateY(210deg) translateZ(250.92px);
	 }
	 .img_wrap img:nth-child(9){
	     transform: rotateY(240deg) translateZ(250.92px);
	 }
	 .img_wrap img:nth-child(10){
	     transform: rotateY(270deg) translateZ(250.92px);
	 }
	 .img_wrap img:nth-child(11){
	     transform: rotateY(300deg) translateZ(250.92px);
	 }
	 .img_wrap img:nth-child(12){
	     transform: rotateY(330deg) translateZ(250.92px);
	 }
	 @keyframes rotateCube{
	     0%{
	         transform: rotateY(0);
	     }
	     100%{
	         transform: rotateY(360deg);
	     }
	 }	
				
	&lt;div class="wrap"&gt;
		 &lt;div class="img_wrap"&gt;
			 &lt;img src="img/hero1.jpg" alt="" /&gt;
			 &lt;img src="img/hero2.jpg" alt="" /&gt;
			 &lt;img src="img/hero3.jpg" alt="" /&gt;
			 &lt;img src="img/hero4.jpg" alt="" /&gt;
			 &lt;img src="img/hero5.jpg" alt="" /&gt;
			 &lt;img src="img/hero6.jpg" alt="" /&gt;
			 &lt;img src="img/hero7.jpg" alt="" /&gt;
			 &lt;img src="img/hero8.jpg" alt="" /&gt;
			 &lt;img src="img/hero9.jpg" alt="" /&gt;
			 &lt;img src="img/hero10.jpg" alt="" /&gt;
			 &lt;img src="img/hero11.jpg" alt="" /&gt;
			 &lt;img src="img/hero12.jpg" alt="" /&gt;
		 &lt;/div&gt;
	 &lt;/div&gt;			
				</pre>
			</div>
			<div class="wrap">
				<div class="img_wrap">
					<img src="img/hero1.jpg" alt="" />
					<img src="img/hero2.jpg" alt="" />
					<img src="img/hero3.jpg" alt="" />
					<img src="img/hero4.jpg" alt="" />
					<img src="img/hero5.jpg" alt="" />
					<img src="img/hero6.jpg" alt="" />
					<img src="img/hero7.jpg" alt="" />
					<img src="img/hero8.jpg" alt="" />
					<img src="img/hero9.jpg" alt="" />
					<img src="img/hero10.jpg" alt="" />
					<img src="img/hero11.jpg" alt="" />
					<img src="img/hero12.jpg" alt="" />
				</div>
			 </div>
		</div>
	</div>
	<!--页面加载进度条-->
	<script src="https://cdn.bootcdn.net/ajax/libs/pace/0.5.0/pace.min.js"></script>
</body>

</html>